<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>配送员主页面</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            padding: 20px;
        }

        .container {
            max-width: 960px;
            margin: auto;
        }

        .sidebar {
            margin-bottom: 30px;
        }

        .nav-link.active {
            background-color: #007bff;
            color: white !important;
            font-weight: bold;
        }

        .card {
            margin-bottom: 20px;
        }

        .card-body {
            padding: 1.5rem;
        }

        .info-label {
            font-weight: bold;
            min-width: 120px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="sidebar">
                <ul class="nav nav-pills flex-column mb-4">
                    <li class="nav-item">
                        <a class="nav-link active" th:href="@{/courier/main}">我的信息</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/courier/pending-orders}">需配送订单</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/courier/total-orders}">总配送订单</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-9">
            <nav class="mb-4">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/courier/order_management}">订单管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/courier/earnings_management}">收益管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/courier/identity_management}">身份管理</a>
                    </li>
                </ul>
            </nav>

            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h1 class="card-title mb-0">配送员基本信息</h1>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <p><span class="info-label">用户ID：</span><span th:text="${userCourierInfo.user_id}"></span></p>
                            <p><span class="info-label">用户名：</span><span th:text="${userCourierInfo.username}"></span></p>
                            <p><span class="info-label">联系电话：</span><span th:text="${userCourierInfo.phone}"></span></p>
                            <p><span class="info-label">邮箱：</span><span th:text="${userCourierInfo.email}"></span></p>
                            <p><span class="info-label">角色：</span><span th:text="${userCourierInfo.role}"></span></p>
                            <p><span class="info-label">状态：</span><span th:text="${userCourierInfo['current_status']}">Status</span></p>
                        </div>
                        <div class="col-md-6">
                            <p><span class="info-label">注册时间：</span><span th:text="${userCourierInfo.created_at}"></span></p>
                            <p><span class="info-label">配送员ID：</span><span th:text="${userCourierInfo.courier_id}"></span></p>
                            <p><span class="info-label">负责区域 ID：</span>
                                <span th:if="${!regionIds.isEmpty()}">
                                    <span th:each="regionId, iterStat : ${regionIds}">
                                        (<span th:text="${regionId}"></span>)
                                        <span th:if="${!iterStat.last}">,</span>
                                    </span>
                                </span>
                                <span th:if="${regionIds.isEmpty()}">无</span>
                            </p>
                            <!--<p><span class="info-label">身份证号：</span><span th:text="${userCourierInfo.id_card}"></span></p>
                            <p><span class="info-label">银行卡号：</span><span th:text="${userCourierInfo.bank_card}"></span></p>
                        --></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入 Bootstrap JS 和依赖 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>